记一种echarts绘制不均匀刻度的方法 您所在的位置:网站首页 echarts y轴固定刻度 记一种echarts绘制不均匀刻度的方法

记一种echarts绘制不均匀刻度的方法

2024-01-06 20:13| 来源: 网络整理| 查看: 265

​首先介绍下背景:最近,接到一个任务,将数据可视化展示出来。项目是基于Vue的,开搞呗,安装echarts库。。。

按照官方的说明文档,开始实现,效果如下:

看着好像也没啥问题。

想多了,从上图中,还不能看出数据大小的明显差异,但到了测试环境,由于数据的差异过大,有的是个数级别的,有的是百万级别的,结果就导致了那些个数据较小的柱子基本看不出来,高度太低(因为echarts是根据数据的大小分配高度的)。没办法,查了一圈官方文档也没啥眉目,就百度了下,看到了 “数据映射”关键词,开始动手实现

第一步:先将y轴等分成几份(这里是5等分),然后设置最小值(这里设置成0),由于数据是接口返回的,这里最大值不设置,由库自己定,然后自定义y轴的刻度标签显示:

yAxis: { type: 'value', min: 0, splitLine: { show: false }, interval: this.interval, axisLabel: { formatter: (v, ix) => { if (this.max this.boundary) { drt = rt.map(el => { return el.map((elv, elix) => { if (elix == 0) { return elv } else if (elv >= this.ylabel[0] && elv this.ylabel[1] && elv this.ylabel[2] && elv this.ylabel[3] && elv { if (this.max


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有